<template>
  <div>
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="personalInfo"
      :rules="rules"
      ref="personalInfo"
      class="demo-ruleForm"
    >
      <!-- 第一行 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark add_first_row">基本信息</div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="姓名">
              <el-input v-model="personalInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="personalInfo.sex" placeholder="男" disabled>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="national">
              <el-select v-model="personalInfo.national" placeholder="汉" disabled>
                <el-option label="汉" value="汉"></el-option>
                <el-option label="满" value="满"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="固定电话">
              <el-input v-model="personalInfo.telephone" placeholder="0591-28352835"></el-input>
            </el-form-item>
            <el-form-item label="最高学历" prop="educate">
              <el-select v-model="personalInfo.educate">
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="大专" value="大专"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="毕业时间" prop="graduation">
              <el-date-picker type="date" placeholder="选择日期" v-model="personalInfo.graduation"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="证件类型">
              <el-input v-model="personalInfo.type"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="personalInfo.phone" placeholder="05928352835"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="nativePlace">
              <el-select v-model="personalInfo.nativePlace" placeholder="合肥" disabled>
                <el-option label="合肥" value="合肥"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参加工作时间" prop="worktime">
              <el-input v-model="personalInfo.worktime" placeholder="1568-09-08"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school">
              <el-input v-model="personalInfo.school"></el-input>
            </el-form-item>
            <el-form-item label="行政职务" prop="duty">
              <el-input v-model="personalInfo.duty"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="证件号码">
              <el-input v-model="personalInfo.certificate"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-date-picker type="date" placeholder="选择日期" v-model="personalInfo.birth"></el-date-picker>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-date-picker type="email" v-model="personalInfo.email"></el-date-picker>
            </el-form-item>
            <el-form-item label="政治面貌" prop="political">
              <el-select v-model="personalInfo.political" placeholder="党员">
                <el-option label="党员" value="党员"></el-option>
                <el-option label="共青团员" value="共青团员"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所学专业" prop="major">
              <el-input v-model="personalInfo.major"></el-input>
            </el-form-item>
            <el-form-item label="行政级别">
              <el-input v-model="personalInfo.level"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24">
          <div>
            <!-- <el-button plain @click="onSubmit">保存</el-button> -->
            <el-button plain @click="updateOk('personalInfo')" class="btn_css">保存</el-button>
            <!-- @click="onSubmit" -->
            <!-- <el-form-item size="large">
            <el-button plain>保存</el-button>
            </el-form-item>-->
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 2,
      labelPosition: "right",
      personalInfo: {
        // name: "",
        // sex: "",
        // national: "",
        // telephone: "",
        // educate: "",
        // graduation: "",
        // phone: "",
        // nativePlace: "",
        // worktime: "",
        // school: "",
        // duty: "",
        // birth: "",
        // political: "",
        // major: ""
      },
      rules: {
        name: [
          { required: true, message: "", trigger: "blur" }
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        national: [{ required: true, message: "", trigger: "blur" }],
        educate: [{ required: true, message: "请选择学历", trigger: "blur" }],
        phone: [{ required: true, message: "请选择学历", trigger: "blur" }],
        nativePlace: [
          { required: true, message: "请选择学历", trigger: "blur" }
        ],
        worktime: [{ required: true, message: "请选择学历", trigger: "blur" }],
        school: [{ required: true, message: "请选择学历", trigger: "blur" }],
        duty: [{ required: true, message: "请选择学历", trigger: "blur" }],
        educate: [
          { required: true, message: "请输入毕业院校", trigger: "blur" }
        ],
        graduation: [
          { required: true, message: "请选择学历", trigger: "blur" }
        ],
        birth: [{ required: true, message: "请选择学历", trigger: "blur" }],
        political: [
          { required: true, message: "请选择学历", trigger: "change" }
        ],
        major: [{ required: true, message: "请选择学历", trigger: "blur" }]
      }
    };
  },
  methods: {
    getCon() {
      this.$axios({
        url: "/personalbasic/find",
        params:{
          id: this.id
        }     
      }).then(res => {
        this.personalInfo = {...(res.data.data)};
        // console.log(111, res);
      });
    },

    updateOk(formName) {
      console.log("3id", this.id)
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios({
            url: "/personalbasic/update",
            method:'post',
            data: {
              id: this.id,
              name: this.personalInfo.name,
              sex: this.personalInfo.sex,
              type:this.personalInfo.type,
              certificate:this.personalInfo.certificate,
              national: this.personalInfo.national,
              telephone: this.personalInfo.telephone,
              email:this.personalInfo.email,
              educate: this.personalInfo.educate,
              graduation: this.personalInfo.graduation,
              phone: this.personalInfo.phone,
              level:this.personalInfo.level,
              foreignExam:this.personalInfo.foreignExam,
              computer:this.personalInfo.computer,
              nativePlace: this.personalInfo.nativePlace,
              worktime: this.personalInfo.worktime,
              school: this.personalInfo.school,
              duty: this.personalInfo.duty,
              birth: this.personalInfo.birth,
              political: this.personalInfo.political,
              major: this.personalInfo.major
            }
          }).then(res => {
            console.log(222, res);
            // this.getCon();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getCon();
    let user = sessionStorage.getItem('user');
    console.log(user);
  }
};
</script>
<style scoped lang="less">
// /deep/.el-col {
//   // width: 300px;
//   display: block;
//   float: left;
// }
.btn_css {
  width: 150px;
  height: 40px;
  display: block;
  margin: 30px auto;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  text-align: center;
}
.col_css {
  width: 340px;
}
.TabNav {
  height: 30px;
}
.add_first_row {
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
}
</style>